<template>
  <div class="container">
    <!-- 导航栏样式优化 -->
    <van-nav-bar
        :style="{
          backgroundColor: '#FFFFFF',
          boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
          position: 'sticky',
          top: 0,
          zIndex: 100
        }"
        title="收益明细"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    
    <!-- 列表容器添加内边距和圆角 -->
    <div class="list-container">
      <van-list
          :finished="finished"
          :finished-text="finishedText"
          :style="{ backgroundColor: '#FFFFFF', borderRadius: '12px' }"
      >
        <van-cell
            v-for="(item, index) in userBalanceList"
            :key="index"
            :title="item.createTime"
            :style="{
              padding: '16px',
              borderBottom: index !== userBalanceList.length - 1 ? '1px solid #F5F5F5' : 'none',
            }"
        >
          <!-- 金额显示修改：调整符号位置 -->
          <template #value>
            <span class="income-amount">¥{{ formatCurrency(item.income) }}</span>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { GetUserBalanceList } from '@/api/user.js';
import { formatCurrency } from '@/utils/format.js';

const onClickLeft = () => history.back();
const userBalanceList = ref([]);
const finished = ref(false);
const finishedText = ref('没有更多了');

getUserBalanceList();

function getUserBalanceList() {
  GetUserBalanceList().then((res) => {
    if (res.data.code == 200000) {
      userBalanceList.value = res.data.data;
    }
  });
}
</script>

<style scoped>
.container {
  background-color: #F7F8FA;
  min-height: 100vh;
}

.list-container {
  padding: 16px;
}

.income-amount {
  font-size: 16px;
  font-weight: 600;
  color: #07C160;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

:deep(.van-nav-bar__title) {
  font-size: 18px;
  font-weight: 600;
  color: #323233;
}

:deep(.van-nav-bar .van-icon) {
  color: #323233;
}

:deep(.van-nav-bar__text) {
  color: #323233;
}

:deep(.van-cell__title) {
  font-size: 15px;
  color: #666666;
}

:deep(.van-list__finished-text) {
  color: #969799;
  font-size: 14px;
  padding: 16px 0;
}
</style>